<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="100px">
      <el-form-item label="订单编号：" prop="orderNum">
        {{ formData.orderNum }}
      </el-form-item>
      <el-form-item label="回款批次：" prop="repayCount">
        {{ formData.repayCount }}
      </el-form-item>
      <el-form-item label="回款金额：" prop="repayAmount">
        <el-input-number v-model="formData.repayAmount" :min="0" :max="100000000" :precision="0" style="width: 36%" />
        &nbsp;&nbsp;<el-tooltip content="回款金额需为整数，小数位会自动四舍五入" placement="top" effect="light"
          style="margin-left: 2%;">
          <el-icon>
            <InfoFilled />
          </el-icon>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as OrderApi from '@/api/order'
import { InfoFilled } from '@element-plus/icons-vue'

defineOptions({ name: 'TestForm' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  orderNum: null,
  orderId: null,
  repayCount: null,
  repayAmount: 0
})
const formRules = reactive({
  repayAmount: [{ required: true, message: '回款金额不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    orderNum: null,
    orderId: null,
    repayCount: null,
    repayAmount: 0
  }
  formRef.value?.resetFields()
}
/** 打开弹窗 */
const open = async (row) => {
  dialogVisible.value = true
  dialogTitle.value = '确认回款'
  resetForm()
  // 修改时，设置数据
  if (row.orderId) {
    formLoading.value = true
    try {
      formData.value.orderId = row.orderId
      formData.value.repayCount = row.repayCount + 1
      formData.value.orderNum = row.orderNum
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

/** 提交 */
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  formLoading.value = true
  try {
    await OrderApi.editFinanceConfirmInfo({
      orderId: formData.value.orderId,
      repayAmount: formData.value.repayAmount
    })
    message.success('确认回款成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.test-form {
  padding-top: 3%;
}

.test-tree {
  width: 100%;
  display: flex;
}

.test-form-footer {
  display: flex;
  justify-content: center;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.num {
  color: var(--el-color-primary);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin: 0 0px 0 0px;
  font-size: 12px;
}

.disabled {
  width: 100%;
  cursor: not-allowed;
}

.tree-node {
  display: flex;
  align-items: center;
}

:deep(.el-tree) {
  padding: 10px 10px 10px 0;

  .el-tree-node {
    .el-tree-node__content {
      // display: flex;
      // justify-content: space-between;
    }

    i.el-tree-node__expand-icon {
      svg {
        display: none;
      }
    }

    i.el-tree-node__expand-icon {
      display: none;
    }
  }

  .el-tree-node.is-current {
    .el-tree-node__content {
      small {
        color: #5e7ce0;
      }
    }

    .el-tree-node__children {
      small {
        color: unset;
      }
    }
  }

  /* ^ 树节点 */
  .el-tree-node {
    position: relative;
    width: auto;
    padding-left: 13px;

    &::before {
      width: 1px;
      height: 100%;
      content: '';
      position: absolute;
      top: -38px;
      bottom: 0;
      left: 0;
      right: auto;
      border-width: 1px;
      border-left: 1px solid #b8b9bb;
    }

    &::after {
      width: 13px;
      height: 13px;
      content: '';
      position: absolute;
      z-index: 0;
      left: 0;
      right: auto;
      top: 12px;
      bottom: auto;
      border-width: 1px;
      border-top: 1px solid #b8b9bb;
    }

    .el-tree-node__content {
      position: relative;
      z-index: 1;
      padding-left: 0 !important;
    }

    .el-tree-node__children {
      padding-left: 12px;
    }

    &:last-child::before {
      height: 50px;
    }
  }

  >.el-tree-node {
    padding-left: 0;

    &::before {
      border-left: none;
    }

    &::after {
      border-top: none;
    }
  }
}

:deep(.disabled-tree) {
  .el-checkbox {
    pointer-events: none;
    cursor: not-allowed;
  }

  .el-checkbox__input {
    .el-checkbox__inner {
      // 禁用的样式
      background-color: rgb(237, 242, 252);
      border-color: rgb(217, 217, 217);
    }

    &.is-checked {

      // 勾选状态下的样式,不加的话禁用时勾选是灰色的
      .el-checkbox__inner {
        background-color: rgb(49, 56, 69);
        border-color: rgb(49, 56, 69);
      }
    }
  }
}
</style>
